<form
  class="d-flex flex-column h-100"
  [formGroup]="accessForm"
  (keyup.enter)="accessForm.valid && onSubmit()"
  (ngSubmit)="onSubmit()"
>
  <h1 mat-dialog-title>
    @if (mode === 'create') {
      <span i18n>Grant access</span>
    } @else {
      <span i18n>Edit access</span>
    }
  </h1>
  <div class="flex-grow-1 py-3" mat-dialog-content>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Alias</mat-label>
        <input
          formControlName="alias"
          matInput
          type="text"
          (keydown.enter)="$event.stopPropagation()"
        />
      </mat-form-field>
    </div>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Type</mat-label>
        <mat-select formControlName="type">
          <mat-option i18n value="PRIVATE">Private</mat-option>
          <mat-option i18n value="PUBLIC">Public</mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Permission</mat-label>
        <mat-select formControlName="permissions">
          <mat-option i18n value="READ_RESTRICTED">Restricted view</mat-option>
          @if (accessForm.get('type').value === 'PRIVATE') {
            <mat-option i18n value="READ">View</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    @if (accessForm.get('type').value === 'PRIVATE') {
      <div>
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>
            Ghostfolio <ng-container i18n>User ID</ng-container>
          </mat-label>
          <input
            formControlName="granteeUserId"
            matInput
            type="text"
            (keydown.enter)="$event.stopPropagation()"
          />
        </mat-form-field>
      </div>
    }
  </div>
  <div class="justify-content-end" mat-dialog-actions>
    <button mat-button type="button" (click)="onCancel()">
      @if (accessForm.dirty) {
        <ng-container i18n>Cancel</ng-container>
      } @else {
        <ng-container i18n>Close</ng-container>
      }
    </button>
    <button
      color="primary"
      mat-flat-button
      type="submit"
      [disabled]="
        mode === 'create'
          ? !(accessForm.dirty && accessForm.valid)
          : !accessForm.valid
      "
    >
      <ng-container i18n>Save</ng-container>
    </button>
  </div>
</form>
